<template>
  <div class="quantity-region-container">
    <p class="title">设备数量地区分布</p>
    <div id="quantity-region-echart-div"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { provinceDeviceCount } from '@/api/homePage'

export default {
  name: 'quantityAndRegion',
  data() {
    return {
      chart: null,
      data: []
    }
  },

  mounted() {
    this.doQuery()
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },

  methods: {
    doQuery() {
      provinceDeviceCount().then(({ data: { data } }) => {
        this.data = data.map(item => {
          return { value: item.deviceCount, name: item.name }
        })
        this.initChart()
      })
    },

    initChart() {
      this.chart = echarts.init(
        document.getElementById('quantity-region-echart-div')
      )
      const option = {
        tooltip: {
          trigger: 'item',
          show: false
        },
        legend: {
          show: true,
          top: '10',
          orient: 'vertical',
          left: 'center',
          textStyle: {
            color: 'rgba(255,255,255,0.65)',
            fontSize: 12
          },
          formatter: function(name) {
            var data = option.series[0].data
            var total = 0
            var tarValue
            for (var i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            var v = tarValue
            var p = Math.round((tarValue / total) * 100)
            return `${name} | ${p}%   ${v}`
          }
        },
        series: [
          {
            name: 'quantity',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                color: '#fff',
                formatter: '{b}\n{d}%，{c}'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ],
        color: [
          '#005DD7',
          '#188FFF',
          '#59CCFF',
          '#13C1C1',
          '#27A97D',
          '#FACB14'
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.quantity-region-container {
  position: absolute;
  width: 320px;
  height: 460px;
  top: 100px;
  left: 27px;
  background-size: 100%;
  // background: linear-gradient(180deg, rgba(7, 122, 254, 0.23) 0%, rgba(0, 94, 162, 0) 100%);

  background-image: url(../../assets/platform/upleft.png);

  .title {
    text-align: center;
    color: #00c2ff;
    font-size: 16px;
    height: 58px;
    line-height: 58px;
    background: linear-gradient(
      135deg,
      rgba(42, 163, 255, 0.20000000298023224) 0%,
      rgba(43, 112, 156, 0.00009999999747378752) 100%
    );
    border-bottom: 2px solid;
    border-image: radial-gradient(
        circle,
        rgba(42.5000012665987, 162.608702480793, 255, 1),
        rgba(
          28.000000230968,
          109.00000110268593,
          171.00000500679016,
          0.4000000059604645
        ),
        rgba(
          43.00000123679638,
          112.000000923872,
          156.00000590085983,
          0.10000000149011612
        )
      )
      2 2;
  }
  #quantity-region-echart-div {
    height: 400px;
    width: 100%;
  }
}
</style>
